<template>

	<view class="login-container">
		<image src="../../../static/img/login_bg.png" class="banner-bg" mode=""></image>
		<!-- 导航 -->
		<view class="login-nav">
			<view @click="changeLoginType('account')" class="nav-item" :class="{'select' : type === 'account'}">
				账号登录

			</view>
			<view @click="changeLoginType('mobile')" class="nav-item" :class="{'select' : type !== 'account'}">
				手机登录
			</view>
		</view>
		<!-- 表单 -->

		<uni-forms class="from" ref="form" :modelValue="formData" :rules="userRules">
			<view class="forms-id" v-if="type === 'account'">
				<uni-forms-item label="账号" name="loginName">
					<input palcehoder-class="palcehoder" class="form-input" v-model="formData.loginName" type="text"
						placeholder="请输入账号">
				</uni-forms-item>
				<uni-forms-item label="密码" name="loginPwd">
					<uni-easyinput :inputBorder="false" placeholderStyle="font-size: 32rpx;"
						palcehoder-class="palcehoder" class="form-input" v-model="formData.loginPwd" type="password"
						placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
			</view>
			<view class="froms-phone" v-else>
				<uni-forms-item label="手机号" name="phone">
					<input v-model="formData.phone" maxlength="11" type="number" placeholder="请填写11位手机号码">
				</uni-forms-item>
				<uni-forms-item label="验证码" name="vCode">
					<input v-model="formData.vCode" maxlength="6" type="text" placeholder="请输入验证码">
					<SendCode @setCode="returnCode = $event" @getForm="getForm"></SendCode>
				</uni-forms-item>
			</view>
			<button class="login-btn" @click="userLoginSubmit">登录</button>
		</uni-forms>
		<view class="footer-select-container">
			<text>注册账号</text>
			<text>忘记密码</text>
		</view>


	</view>

</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {

		data() {
			return {
				isSelect: true,
				type: "account",
				// 表单数据
				formData: {
					loginName: "",
					loginPwd: "",
					phone: "",
					vConde: ""
				},
				returnCode: null
			}
		},

		methods: {

			//表单提交,登录
			async userLoginSubmit() {
				//获取数据
				const res = await this.$refs.form.validate();

				//发送数据
				this.sendUserInfo({
					...res,
					type: this.type
				})

			},

			//表单验证方式切换
			changeLoginType(state) {
				this.type = state;
				//清除表单内容
				this.$refs.form.clearValidate()
			},

			//登录数据发送
			async sendUserInfo(data) {
				const userInfo = await this.$http.user_login(data);

				if (userInfo) {

					//存储用户信息 

					this.updetaUserInfo(userInfo);

					uni.showToast({
						title: "登录成功",
						icon: "none"
					});

					setTimeout(() => {
						// #ifdef H5
						//返回首页
						uni.switchTab({
							url: "/pages/index/index"
						})
						// #endif
						// #ifndef H5
						try {
							//返回之前所在界面
							uni.navigateBack()
						} catch (e) {
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}


						// #endif  
					}, 1200)
				}
			},
			//点击获取验证码
			getForm(callback) {

				callback && callback(this.$refs.form)
			},


		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
</style>

<style lang="scss" scoped>
	@import 'css/login.scss';
</style>
